<template>
    <view class="app">
		<view :class="['nav-item', item.url==''?'nav-item-1':'']" v-for="(item,index) in url" @click="to(item.url)" >{{item.name}}</view>
		<button @click="clickBtn">组件</button>
    </view>
</template>

<script>
export default {
    data(){
        return{
			url:[
				{name: '秒杀倒计时',url: '/pages/component/countdown'},
				{name: '图片上传压缩',url: '/pages/component/upload-compression'},	
				{name: '骨架屏',url: '/pages/component/skeleton'},	
				{name: '自定义头部',url: '/pages/component/custom_nav_bar'},	
				{name: '待 优化 兼容 !',url: ''},
				// #ifdef H5
				{name: '日期选择',url: '/pages/component/time-selection'},
				{name: '数字滚动（暂未兼容小程序）',url: '/pages/component/numScroll'},
				// #endif
				
			],
        }
    },
    onLoad(){
		// this.debounceSearch =  this.$util.debounce(() => {
		// 	console.log(123)
		// }, 1000)
	},
    methods:{
		to(url){uni.navigateTo({url})},
		clickBtn(){
			this.$util.debounce(this.toNext, 500)
		},
		toNext(){
			console.log(123)
		}
    },
	onPageScroll(res) {
		console.log('滚动监听')
	}
}
</script>

<style lang="scss" scoped>
	.app{min-height: 100vh;background: #f3f3f3;}
	.nav-item{font-size: 30rpx;color: #333;height: 100rpx;line-height: 100rpx;padding-left: 60rpx;border-bottom: 1px solid #eee;background-color: #fff;position: relative;
		&.nav-item-1{color: #999;text-align: center;font-size: 26rpx;padding: 0;
			&::after{content: '';clear: both;display: block;width: 130px;height: 1rpx;background: #fff;border-top: 2rpx dotted #d7d7d7;border-radius: 0;position: absolute;left: 25rpx;top: 50%;transform: translateY(-50%);}
			&::before{content: '';clear: both;display: block;width: 130px;height: 1rpx;background: #fff;border-top: 2rpx dotted #d7d7d7;border-radius: 0;position: absolute;right: 25rpx;top: 50%;transform: translateY(-50%);}
		}
		&::after{content: '';clear: both;display: block;width: 8px;height: 8px;background: #73acf1;border-radius: 50%;position: absolute;left: 25rpx;top: 50%;transform: translateY(-50%);}
		&:nth-last-child(1){border: 0;}
		&:active{background: #f9f9f9;}
	}
</style>

